<template>
    <div class="mainDiv">
        <div class="rowHead">
            <el-date-picker v-model="riqi" type="daterange" align="right" placeholder="选择日期范围(默认当天)" :picker-options="pickerOptions2" @change="getList">
            </el-date-picker>
            <el-select v-model="leave" @change="getList">
                <el-option v-for="o in leaves" :label="o.txt" :value="o.val"></el-option>
            </el-select>
            <el-button type="primary" icon="h-shuaxin1" @click="getList" style="float:right;margin-left: 5px">刷新列表</el-button>
            <el-button type="primary" @click="outXlsx">导出数据</el-button>
            <el-input style="width: 300px;float:right" placeholder="搜索员工姓名、工号" v-model="page.search" @keyup.enter.native="getList">
                <i slot="suffix" class="el-icon-search" style="line-height: 40px;width: 25px;cursor: pointer;" @click="getList"></i>
            </el-input>
        </div>
        <el-table :data="list" :stripe="true" height="100%">
            <!-- <el-table-column prop="id" label="ID" width="80"></el-table-column> -->
            <el-table-column prop="worknum" label="工号"></el-table-column>
            <el-table-column prop="name" label="员工姓名"></el-table-column>
            <el-table-column prop="xjyj" label="现金业绩"></el-table-column>
            <el-table-column prop="xjtc" label="现金提成"></el-table-column>
            <el-table-column prop="khyj" label="卡耗业绩"></el-table-column>
            <el-table-column prop="khtc" label="卡耗提成"></el-table-column>
            <el-table-column prop="sgtc" label="手工提成"></el-table-column>
            <el-table-column prop="qttc" label="其他提成"></el-table-column>
            <el-table-column prop="ticheng" label="提成"></el-table-column>
            <el-table-column prop="dixin" label="底薪"></el-table-column>
            <el-table-column prop="zhibiao" label="指标"></el-table-column>
            <el-table-column prop="jiangjin" label="奖金"></el-table-column>
            <el-table-column prop="butie" label="补贴"></el-table-column>
            <el-table-column prop="kouchu" label="扣除"></el-table-column>
            <el-table-column prop="zongji" label="总计"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-tooltip content="结算工资" placement="left" :open-delay="800" v-qx="quanxian.jiesuan">
                        <el-button icon="el-icon-h-jiezhang" type="success" size="mini" @click="jiesuan(scope.row)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <div class="block center bg-light">
            <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page.currentPage" :page-sizes="[15, 30, 50, 100]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import C from '#/src/common/common.js'

export default {
    name: 'userPayList',
    data() {
        return {
            list: [],
            total: 0,
            page: {
                currentPage: 1,
                pageSize: 15,
                search: '',
            },
            leaves: [{
                txt: '在职',
                val: 0
            }, {
                txt: '离职',
                val: 1
            }],
            leave: 0,
            quanxian: {
                jiesuan: 'paymoney_jiesuan',
            },
            riqi: [new Date(), new Date()],
            pickerOptions2: {
                shortcuts: [{
                    text: '本月',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date(end.getFullYear(), end.getMonth(), 1, 0, 0, 0)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }]
            }
        }
    },
    methods: {
        jiesuan: async function(row) {
            await C.openBrowserWindow('/userSalary', { id: row.id, time: this.riqi }, { width: 1400, height: 900, useSpa: true, spaModel: 'shop', transparent: true, frame: false })
            this.getList()
        },

        sizeChange: function(val) {
            this.page.pageSize = val
            this.getList()
        },

        currentChange: function(val) {
            this.page.currentPage = val
            this.getList()
        },

        getList: async function() {
            let that = this
            let page = {
                pages: this.page.currentPage,
                limits: this.page.pageSize,
                search: this.page.search,
                zt: that.leave,
                times: that.riqi ? that.riqi : [new Date(), new Date()]
            }
            let data = await C.ajax('/shop/userpay/getuesrpaylist', { page: JSON.stringify(page) }, 'post')
            if (data) {
                data.data.forEach((row) => {
                    row.zongji = Number(row.dixin + row.ticheng + row.zhibiao + row.jiangjin + row.butie - row.kouchu).toFixed(2)
                })
                that.list = data.data
                that.total = data.count
            }
        },
        async outXlsx() {
            let that = this
            let page = {
                pages: this.page.currentPage,
                limits: 1000,
                search: this.page.search,
                zt: that.leave,
                times: that.riqi ? that.riqi : [new Date(), new Date()]
            }
            let data = await C.ajax('/shop/userpay/getuesrpaylist', { page: JSON.stringify(page) }, 'post')
            if (data) {
                data.data.forEach((row) => {
                    row.zongji = Number(row.dixin + row.ticheng + row.zhibiao + row.jiangjin + row.butie - row.kouchu).toFixed(2)
                })
                let header = {
                    worknum: '工号',
                    name: '姓名',
                    xjyj: '现金业绩',
                    xjtc: '现金提成',
                    khyj: '卡耗业绩',
                    khtc: '卡耗提成',
                    sgtc: '手工提成',
                    qttc: '其他提成',
                    zc: '（左为提成明细右为工资组成）',
                    ticheng: '提成',
                    dixin: '底薪',
                    zhibiao: '指标',
                    jiangjin: '奖金',
                    butie: '补贴',
                    kouchu: '扣除',
                    zongji: '总计'
                }
                let name = C.time(Math.round(new Date(page.times[0]).getTime() / 1000)) + '至' + C.time(Math.round(new Date(page.times[1]).getTime() / 1000)) + '工资数据'
                C.excel(name, header, data.data)
            }
        }
    },
    mounted: function() {
        this.getList()
    }
}
</script>